<template>
<!-- 用到了 -->
    <div style="padding: 10px" >
        <div class="title">
            <h1>{{stitle}}</h1>
        </div>
        <el-row><h4 style="color:#1e90ff;width:784px;margin:0 auto;text-align:right;">总提交数：{{num}}</h4></el-row>
        <div v-if="num>0">
            <div v-for="(item,index) in res" :key="index" class="infinite-list-item" >
                <el-card  style="width:784px;margin: 0 auto;" v-if="item.type!=3">
                    <div style="width:700px;margin:0 auto;font-size:20px;color:#1e90ff;">{{index+1}}、{{item.questionName}}</div>
                    
                    
                    <el-table 
                                :data="item.optionData"
                                border style="width:100%;" 
                                :header-cell-style="{background:'#EFFBFB',color:'#1e90ff'}"> 
                                <el-table-column  prop="optionName" label="选项描述"></el-table-column>
                                <el-table-column prop="count" label="选项统计" align="center"></el-table-column>
                    </el-table>
                   
                       <!-- {{item}} -->
                    
                   
                </el-card>
            </div>

            <div style="width:700px;margin:0 auto;font-size:20px;color:#1e90ff;" >
                          <el-table
                          :data="tableData"
                        border style="width:100%;" 
                         :header-cell-style="{background:'#EFFBFB',color:'#1e90ff'}"
                          row-key="id"
                          v-if="tableData!=null"
                        
                      >
                     
                      <el-table-column
                            prop="questionName"
                            label="问题描述">
                        </el-table-column>
                        <el-table-column
                            prop="context"
                            label="回答内容">
                        </el-table-column>
                      <el-table-column
                            prop="userId"
                            label="回答用户编号">
                        </el-table-column>
                       
                      </el-table>
            </div>
        </div>
        <div v-if="num===null">
            <el-card style="height:200px;width:784px;margin:0 auto;margin-top:50px;text-align:center;line-height:150px">
                <h2>暂无问卷回答数据</h2>
            </el-card>
        </div>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    data(){
        return {
            uid: this.$route.query.id,
            sid: this.$route.query.sid,
            stitle:sessionStorage.getItem('stitle'),            
            res:[],
            num:sessionStorage.getItem('num'),
            total: 0, //表格数据的总条数
            pageSize: 3 , // 每页显示的数据大小
            optionData: 
            [
              {optionName:'12',count:12},
              {optionName:'1',count:22},
            ],
             tableData: 
            [
                {
                  context: "我是11",
                  questionName: "你是谁",
                  userId: "2018100983401"
                },
               
            ],
             
        }
    },
    methods: {
         getTitle(){
            const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaire/?id='+this.$route.query.id,
                url:'/questionnaire/?id='+this.$route.query.id
            }).then(function(resp){
                _this.stitle=resp.data.data[0].questionTitle
                sessionStorage.setItem('stitle',resp.data.data[0].questionTitle)
            })
        },
        getCount(){
          const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaire/?id='+this.$route.query.id,
                url:'/count?questionnaireId='+this.$route.query.id
            }).then(function(resp){
                console.log('p个数为'+resp.data.data)
                _this.num=resp.data.data
                 sessionStorage.setItem('num',resp.data.data)
            })
        },
        getanswer(){
          const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaire/?id='+this.$route.query.id,
                url:'/allCompletion?questionnaireId='+this.$route.query.id
            }).then(function(resp){
                console.log('p个数为'+resp.data.data)
                _this.tableData=resp.data.data
                // sessionStorage.setItem('stitle',resp.data.data[0].questionTitle)
            })
        }
    },
    created(){
        this.getTitle()
        this.getCount()
        this.getanswer()
    },
    mounted:function(){
        const _this=this
        axios({
            url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,
            method:'get',
        }).then(function(resp){
           // console.log('444'+resp)
            const data1=JSON.stringify(resp.data.data)
           // console.log('333'+typeof(data1))
            const jsonObj =JSON.parse(data1)
            var arr=[];
            for(let i in jsonObj){
                arr.push(jsonObj[i])
            }
                  arr.forEach(element=>{
                     console.log('555'+JSON.stringify(element))
                      _this.optionData= JSON.stringify(element)
                  })

                    _this.res = arr

    }
        )
}


}
</script>
<style scoped>
       body,html{
        background-color: rgb(245, 245, 245);
    }
    .full {
        width: 100%;
        height: 100%;
    }
    .title{
        margin: 0 auto;
        margin-bottom: 30px;
        width: 790px;

        color: #1e90ff;
        text-align: center;
    }
    .title > h1{
        font-size: 28px;
    }
    .temp{
        width: 100%;
        height: 35px;        
    }
    .temp1{
        width: 100%;
        height: 25px;        
    }
    .temp2{
        width: 100%;
        height: 10px;        
    }
    .border{
        border: 1px solid red;
    }
    .demo {
        /* position: relative; */
        margin-left: 100px;
        width: 550px;
        height: 250px;
    }
    .demo1 {
        /* position: relative; */
        /* padding-left: 70px; */
        width: 100%;
        height: 250px;
    }
</style>